<template>
  <div id="app" @click="handleClick" v-cloak>
    <el-header v-show="$route.name&&$route.name!=='login'">
      <p>{{user&&user.name}}</p>
      <button class="exit" v-show="!/login|answer/.test($route.name)" @click="exit">
        <el-icon name="close" />
      </button>
      <button class="back" v-show="!/home|login/.test($route.name)" @click="goBack">
        <el-icon name="back" />
      </button>
      <div class="clear"></div>
    </el-header>
    <el-container>
      <router-view />
    </el-container>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "app",
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    ...mapActions(["exit"]),
    handleClick(e) {
      if (/el-image-viewer__img|el-image-viewer__mask/.test(e.target.className))
        document.querySelector(".el-image-viewer__close").click();
    },
    goBack() {
      const { name } = this.$route;
      const { go } = this.$router;
      if (name === "answer")
        this.$confirm("你当前正在做题中,是否退出?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error"
        })
          .then(res => this.$router.go(-1))
          .catch(err => {});
      else this.$router.go(name === "grade" ? -2 : -1);
    }
  }
};
</script>

<style src="./assets/css/common.css"/>
<style scoped>
.el-header p {
  float: left;
  font-size: 32px;
}

.el-header {
  line-height: 60px;
  padding: 0;
  background: #409eff;
  color: white;
  margin-bottom: 15px;
}

.el-header >>> i {
  color: white;
}

.el-header button {
  font-size: 48px;
  float: right;
}

.el-container {
  height: calc(100% - 75px);
  overflow: hidden;
}

.el-container > div {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 10px;
}

.el-container > div {
  width: 100%;
}
</style>
